<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">

	<el-container>
		<include file="Fenxiao:left" />




				<el-main>



						<el-row :gutter="20">
							<el-col :span="6"><div class="grid-content bg-purple">
								注册人数
							</div></el-col>
							<el-col :span="6"><div class="grid-content bg-purple">
								注册人数
							</div></el-col>
							<el-col :span="6"><div class="grid-content bg-purple">
								注册人数
							</div></el-col>
							<el-col :span="6"><div class="grid-content bg-purple">
								注册人数
							</div></el-col>

						</el-row>

					<el-row :gutter="20" >
						<el-col :span="16" ><div class="grid-content bg-purple"></div></el-col>
						<el-col :span="6" :offset="2"><div class="grid-content bg-purple" style="height:500px;"></div></el-col>
					</el-row>

				</el-main>








		</el-container>

	</el-container>

</div>


<style>
	.el-aside{
		overflow:inherit;
	}
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	.el-header, .el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;

	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	body > .el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}


	.el-row {
		margin-bottom: 20px;
	&:last-child {
		 margin-bottom: 0;
	 }
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

</style>

<script>
    var Main = {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(10).fill(item)
            }
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

